<template>
  <div class="wrapper">
    <div class="container">

      <div class="row blog">
        <div class="col-md-8">
          <div v-for="list in articles" class="panel">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-5">
                  <div class="blog-img-sm">
                    <img v-bind:src="list.img_url+imgToole">
                  </div>
                </div>
                <div class="col-md-7">
                  <h1 class=""><router-link :to="{name:'article',params:{id:list.id}}">{{list.title}}</router-link></h1>
                  <p class=" auth-row">
                    By <a href="#">{{list.auth}}</a> | {{list.create_at}} | <a href="#">{{list.name}} </a>
                  </p>
                  <p>
                    {{list.intro}}...... </p>
                  <router-link :to="{name:'article',params:{id:list.id}}" class="more">查看详情</router-link>
                </div>
              </div>
            </div>
          </div>
          <div class="text-center">
              <el-pagination
                layout="prev, pager, next"
                :total="page.count">
              </el-pagination>
          </div>
        </div>
        <div class="col-md-4">
          <div class="panel">
            <div class="panel-body">
              <input type="text" placeholder="文章 搜索" class="form-control blog-search">
            </div>
          </div>
          <div class="panel">
            <div class="panel-body">
              <div class="blog-post">
                <h3>热门 文章</h3>
                <ul>
                  <li v-for="list in hotArticle"><a href="list in hotArticle"><i class="  fa fa-angle-right"></i> {{list.title}}</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel">
            <div class="panel-body">
              <div class="blog-post">
                <h3>文章分类</h3>
                <ul>
                  <li v-for="list in category"><a href="list in hotArticle"><i class="  fa fa-angle-right"></i> {{list.name}}</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel">
            <div class="panel-body">
              <div class="blog-post">
                <h3>时间</h3>
                <ul>
                  <li><a href="javascript:;"><i class="  fa fa-angle-right"></i> May 2016</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.el-pagination{
  background:#eeeff3;
}
</style>
<script>
  export default {
    data () {
      return {
        articles: [],
        hotArticle: [],
        category: [],
        imgToole: '?imageView2/1/w/200/h/140/interlace/1',
        page: {
          count: 0,
          page: 1,
          size: 10
        }
      }
    },
    mounted: function(){
      this.load.loading(true,'加载中.....')
      this.getArticles();
      this.getHotArticle();
      this.getHotCategory();
      this.getArticlesCount();
    },
    updated: function(){
      this.load.loading(false,'加载中.....')
    },
    methods: {
      open( msg, type ) {
        this.$message( {
          message: msg,
          type: type
        } );
      },
      getArticles(){
        this.$http.post( '/home/article/article/gets', this.page ).then( function( response ){
          if( response.data.status ){
            this.articles = response.data.data
          }else{
            open( '数据获取失败', 'warning' )
          }
        }, function( response ){
          open( '数据获取失败', 'warning' )
        } ).bind( this );
      },
      getArticlesCount(){
        this.$http.get( '/home/article/article/count' ).then( function( response ){
          if( response.data.status ){
            this.page.count = response.data.data
          }else{
            open( '数据获取失败', 'warning' )
          }
        }, function( response ){
          open( '数据获取失败', 'warning' )
        } ).bind( this );
      },
      getHotArticle(){
        this.$http.get( '/home/article/article/hots' ).then( function( response ){
          if( response.data.status ){
            this.hotArticle = response.data.data
          }else{
            open( '数据获取失败', 'warning' )
          }
        }, function( response ){
          open( '数据获取失败', 'warning' )
        } );
      },
      getHotCategory(){
        this.$http.get( '/home/article/category/gets' ).then( function( response ){
          if( response.data.status ){
            this.category = response.data.data
          }else{
            open( '数据获取失败', 'warning' )
          }
        }, function( response ){
          open( '数据获取失败', 'warning' )
        } );
      }
    }
  }
</script>